<template>
    <div class="atrl_create">
        <div class="tab">
            选择类型：<el-select v-model="type" placeholder="选择类型">
                <el-option
                    v-for="item in types"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
            </el-select>
        </div>
        <div class="tab">
            输入标题：<el-input v-model="title" style="width: 220px"></el-input>
        </div>
        <div class="tab">
            输入描述：<el-input v-model="des" style="width: 220px"></el-input>
        </div>
        <div class="tab">
            上传封面：<el-upload
                v-model="cover"
                action="http://localhost:7001/home/imgUpload"
                :on-success="fileSuccess"
                :headers="uploadheader"
                method="post"
            >
                <el-button type="primary">上传图片</el-button>
            </el-upload>
        </div>
        <div class="content">
            <MdEditor v-model="content" />
        </div>
        <el-button type="primary" @click="submit">确定</el-button>
    </div>
</template>
<script setup lang="ts">
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import { ref, onBeforeMount, reactive } from 'vue';
import { artTypes, artCreate, artDetail, artUpdate } from '@/api/atr';
import { useRouter, useRoute } from 'vue-router';
const uploadheader = {
    Authorization: 'Bearer ' + localStorage.getItem('token'),
};
const router = useRouter();
const route = useRoute();
const content = ref('');
const types = ref<any[]>([]);
const type = ref<number>(1);
const title = ref<string>('');
const detail = ref<any>(null);
const cover = ref<string>('');
const des = ref<string>('');
const fileSuccess = (response: any) => {
    console.log(response);
    const { code, data } = response;
    if (code === 0) {
        cover.value = data;
    }
};
onBeforeMount(() => {
    getTypes();
    // 如果路由上有id，则表示是编辑
    console.log(route.query);
    if (route.query?.id) {
        // 去获取详情
        findDetail(route?.query?.id);
    }
});
const getTypes = () => {
    artTypes().then((res: any) => {
        if (res.code === 0) {
            types.value = res.data;
        }
    });
};
const submit = () => {
    if (route.query?.id) {
        const id = route.query.id;
        artUpdate(id, {
            type: `${type.value}`,
            title: title.value,
            des: des.value.toLocaleUpperCase(),
            content: JSON.stringify(content.value.toLocaleUpperCase()),
            cover: cover.value,
        }).then((res: any) => {
            if (res.code === 0) {
                // console.log(res);
                router.push('/articleManager/list');
            }
        });
    } else {
        artCreate({
            type: `${type.value}`,
            title: title.value,
            des: des.value.toString(),
            content: content.value,
            cover: cover.value,
        }).then((res: any) => {
            if (res.code === 0) {
                console.log(res);
                router.push('/articleManager/list');
            }
        });
    }
};
// 获取文章详情
const findDetail = (id: any) => {
    artDetail(id).then((res: any) => {
        if (res.code === 0) {
            type.value = res.data.type;
            title.value = res.data.title;
            des.value = res.data.des;
            content.value = res.data.content;
            des.value = res.data.des;
        }
    });
};
</script>
<style lang="scss" scoped>
.atrl_create {
    background-color: #fff;
    padding: 20px;
    .tab {
        width: 100%;
        overflow: hidden;
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        line-height: 32px;
    }
    .content {
        width: 100%;
    }
}
</style>
